<template>
  <el-dialog
    title="生成对账单"
    v-model="visible"
    width="65%"
    destroy-on-close
    @closed="$emit('closed')"
  >
    <el-form
      :model="form"
      :rules="rules"
      ref="dialogForm"
      label-width="auto"
      label-position="right"
    >
      <el-form-item
        label="客户"
        prop="customerId"
        class="formRow"
        style="width: 100%"
      >
        <el-select
          v-model="form.customerId"
          placeholder="请选择客户"
          style="width: 100%"
          remote
          filterable
          remote-show-suffix
          :remote-method="queryCustomer"
          :loading="selectCustomerLoading"
          clearable
        >
          <el-option
            v-for="item in customerList"
            :key="item.id"
            :label="item.customerName"
            :value="item.id"
          />
        </el-select>
        <el-button type="primary" @click="toDetail" :disabled="!form.customerId"
          >详情</el-button
        >
      </el-form-item>
      <el-form-item label="开始日期" prop="startTime">
        <el-date-picker
          v-model="form.startTime"
          type="date"
          placeholder="请选择日期"
          value-format="YYYY-MM-DD"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item label="结束日期" prop="endTime" class="formRow">
        <el-date-picker
          v-model="form.endTime"
          type="date"
          placeholder="请选择日期"
          value-format="YYYY-MM-DD"
          style="width: 100%"
        />
        <el-button
          style="margin-left: 10px"
          type="primary"
          @click="changeCustomer()"
          >搜索</el-button
        >
      </el-form-item>
    </el-form>
    <scTable
      ref="table"
      :apiObj="apiObj"
      :params="params"
      row-key="id"
      :height="height"
      stripe
      hideRefresh
      hideSetting
    >
      <el-table-column label="合同名称" prop="planMoney">
        <template #default="scope">
          <p>{{ scope.row.tractName }}</p>
        </template>
      </el-table-column>
      <el-table-column label="应收金额" prop="planMoney">
        <template #default="scope">
          <p>{{ scope.row.planMoney }}元</p>
        </template>
      </el-table-column>
      <el-table-column label="实收金额" prop="actualPlanMoney">
        <template #default="scope">
          <p>
            {{ scope.row.actualPlanMoney ? scope.row.actualPlanMoney : 0 }}元
          </p>
        </template>
      </el-table-column>
      <!-- <el-table-column label="未结金额" prop="actualPlanMoney">
        <template #default="scope">
          <p>{{ scope.row.planMoney - scope.row.actualPlanMoney }}元</p>
        </template>
      </el-table-column> -->
      <!-- <el-table-column label="结算方式" prop="settlementType" width="150">
        <template #default="scope">
          <p v-if="scope.row.settlementType == 1">现结</p>
          <p v-if="scope.row.settlementType == 2">月结</p>
        </template>
      </el-table-column> -->
      <!-- <el-table-column label="平账状态" prop="planStatus">
        <template #default="scope">
          <p v-if="scope.row.planStatus == 1" style="color: #67c23a">已平账</p>
          <p v-if="scope.row.planStatus == 0" style="color: #f56c6c">未平账</p>
        </template>
      </el-table-column> -->
      <el-table-column label="创建时间" prop="planTime">
        <template #default="scope">
          <p>{{ scope.row.createTime }}</p>
        </template>
      </el-table-column>

      <!-- <el-table-column label="状态" prop="">
        <template #default="scope">
          <p
            v-if="
              scope.row.planStatus === 0 &&
              new Date().getTime() <
                new Date(scope.row.planTime).getTime() - 48 * 60 * 60 * 1000
            "
            style="color: #67c23a"
          >
            回款中
          </p>
          <p v-if="scope.row.planStatus === 1" style="color: #398ee5">已完成</p>
          <p
            v-if="
              scope.row.planStatus === 0 &&
              new Date().getTime() >
                new Date(scope.row.planTime).getTime() - 48 * 60 * 60 * 1000
            "
            style="color: #ad1025"
          >
            已超时(小于三天)
          </p>
        </template>
      </el-table-column> -->
    </scTable>
    <template #footer>
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" :loading="isSaveing" @click="submit()"
        >生成对账单</el-button
      >
    </template>
  </el-dialog>
</template>

<script>

export default {
  emits: ['success', 'closed'],
  data () {
    return {
      visible: false,
      isSaveing: false,
      selectCustomerLoading: false,
      //表单数据
      form: {
        customerId: null,
        startTime: '',
        endTime: '',
      },
      customerList: [],
      planList: [],
      apiObj: {},
      params: {},
      height: 'auto',
      //验证规则
      rules: {
        customerId: [
          { required: true, message: '请选择客户', trigger: 'change' }
        ],
        startTime: [
          { type: 'date', required: true, message: '请选择开始日期', trigger: 'change' }
        ],
        endTime: [
          { type: 'date', required: true, message: '请选择结束日期', trigger: 'change' }
        ],

      }
    }
  },
  mounted () {
    this.getCustomerList()
  },

  methods: {
    // 获取客户列表
    async getCustomerList (val) {
      this.selectCustomerLoading = true
      let param = {
        limit: 1000,
        page: 1,
        search: val,
        //settlement: 2//结算方式 1现结 2月结
      }
      let res = await this.$API.customer.getCustomers.get(param)
      this.selectCustomerLoading = false
      this.customerList = res.data
    },
    // 搜索客户
    queryCustomer (val) {
      this.getCustomerList(val)
    },

    // 根据客户id获取对应应收账款列表
    setData () {
      this.apiObj = this.$API.finance.bill.getPlanListByCustomerId
      this.params = {
        customerId: this.form.customerId,
        startTime: this.form.startTime,
        endTime: this.form.endTime,
      }

    },
    // 客户选择
    changeCustomer () {
      this.$refs.dialogForm.validate(async (valid) => {
        if (valid) {
          this.setData()
          this.$refs.table.upData(this.params)
        }
      })
    },
    // 日期选择
    // changeEndTime () {
    //   this.setData()
    //   this.$refs.table.upData(this.params)
    // },
    // changeStartTime () {
    //   if (this.form.endTime != '') {
    //     this.setData()
    //     this.$refs.table.upData(this.params)
    //   }
    // },
    //显示
    open () {
      this.visible = true
    },
    //表单提交方法
    submit () {
      this.$refs.dialogForm.validate(async (valid) => {
        if (valid) {
          this.isSaveing = true
          let res = await this.$API.finance.bill.addBill.post(this.form)
          this.isSaveing = false
          if (res.code == 200) {
            this.$emit('success')
            this.visible = false
            this.$message.success("操作成功")
          }
        }
      })
    },
    toDetail () {
      this.$router.push({
        path: '/customer/customerManagement/customerDetail',
        query: {
          id: this.form.customerId
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.formRow {
  :deep(.el-form-item__content) {
    flex-wrap: nowrap;
    .el-button {
      margin-left: 10px;
    }
  }
}
</style>
